import {gsap} from "gsap/all";
import {MotionPathPlugin} from "gsap/MotionPathPlugin";
import {onMounted, ref, onUpdated} from 'vue'
import {Modal} from "view-ui-plus";
import {getLocalStorage} from "@/lib/util";
import usePcUpdateStore from './store/update'
import { useRoute } from 'vue-router'
gsap.registerPlugin(MotionPathPlugin)
export function useUpdateBall() {
    const update_info = ref({}) // 更新信息,包含速度、百分比等
    const hasCheckRs=ref(false)  //检查更新时，显示提示信息
    const checkRs=ref('')  //检查更新时的返回结果
    const route = useRoute()
    let {setNeedUpdate,setShowUpdate,setIsDownloading} = usePcUpdateStore()
    onMounted(() => {
// debugger
        myApi.handleCheckPcUpdate().then(res=>{

            setNeedUpdate(res.success && res.needUpdate)
            setIsDownloading(res.success && res.isDownloading)
            hasCheckRs.value=true
            checkRs.value=res.msg || ''
            if(res.success && res.needUpdate && res.version!=getLocalStorage('ignoreVersion') && route.name=='login'){
                setShowUpdate(true)
            }else if(!res.success && route.name=='login'){
                console.log(res)
                // hasCheckRs.value=true
                checkRs.value=res.msg || '找不到更新资源，更新失败，请通过小程序联系管理员'
            }
        })
        myApi.onPcUpdateProgress((_event, info) => {
            // debugger
            update_info.value = info
        })

        myApi.onPcDownloaded(() => {
            update_info.value = {}
            setShowUpdate(false)
            gsap.killTweensOf(".particle");
            particlesList.value.forEach((particle, index) => {
                // 使用GSAP创建动画
                gsap.killTweensOf(particleRefs.value[index]);
            })
            Modal.confirm({
                title: '提示',
                content: '新版本已下载，是否立即安装？',
                onOk: () => {
                    myApi.toPcInstall()
                },
                onCancel: () => {
                    // 取消操作
                }
            })
        })

    })

    /*生成随机的粒子*/
//粒子的数组
    const particlesList = ref([])
//外层大球的半径
    const ballRadius = ref(100)

    function getRandomRGBColor() {
        // 限制绿色和蓝色分量在100到255之间，红色分量在0到100之间
        const r = Math.floor(Math.random() * 101) // 0 to 100
        const g = Math.floor(Math.random() * 156) + 100 // 100 to 255
        const b = Math.floor(Math.random() * 156) + 100 // 100 to 255
        return `rgb(${r}, ${g}, ${b})`
    }

    function createParticle(num) {
        // debugger
//  根据num生成随机粒子
        for (let i = 0; i < num; i++) {
            const {
                outRadiusArr: [outX, outY]
            } = generateRandomPoint(70, ballRadius.value)
            const particle = {
                color: getRandomRGBColor(),
                left: 100 + outX,
                top: 100 + outY,
            }
            particlesList.value.push(particle)
        }
    }

    function generateRandomPoint(radius, outRadius) {
        //根据半径生成随机坐标，radiusArr：半径上的坐标，outRadiusArr：半径外的坐标,innerRadiusArr：半径内的坐标
        //outRadiusArr只有存在外环半径outRadius时才会生成
        // 生成一个0到2π之间的随机角度
        const angle = Math.random() * (2 * Math.PI)

        // 极坐标到笛卡尔坐标的转换，生成半径radius上的坐标
        const x = radius * Math.cos(angle)
        const y = radius * Math.sin(angle)
        //生成半径radius内的坐标

        const innerX = Math.random() * radius * Math.cos(angle)
        const innerY = Math.random() * radius * Math.sin(angle)

        //生成radius外，outRadius内的坐标
        // debugger
        const randomRadius = radius + Math.random() * (outRadius - radius)
        const outX = randomRadius * Math.cos(angle)
        const outY = randomRadius * Math.sin(angle)


        return {
            radiusArr: [x, y],
            innerRadiusArr: [innerX, innerY],
            outRadiusArr: [outX, outY]
        }
    }

    const particleRefs = ref({})

    function setItemRef(index, el) {
        if (el) {
            // 如果元素存在，则将其存储在对象中
            particleRefs.value[index] = el
        } else {
            // 如果元素不存在（可能是被销毁了），则从对象中删除
            delete particleRefs.value[index]
        }
    }

    function createAnimation(movementRange = 3) {
        // 使用GSAP创建动画
        particlesList.value.forEach((particle, index) => {
            // 使用GSAP创建动画
            gsap.to(particleRefs.value[index], {
                motionPath: {
                    path: '#svg',
                    align: '#svg',
                    alignOrigin: [Math.random() * 10 - 5, Math.random() * 10 - 5]
                },
                repeat: -1, // 无限重复
                duration: 3 * Math.random() + 2, // 随机持续时间

                ease: 'linear', // 线性运动
                delay: Math.random() * 2 // 随机延迟
            })
        })
    }

    return {
        update_info,
        particlesList,
        ballRadius,
        hasCheckRs,
        checkRs,
        setItemRef,
        createParticle,
        createAnimation
    }
}
